<template>
    <div>
        <div style="text-align: left;"><el-button type="primary" @click="handleAddUserGroup">新增</el-button></div>
        <div style="margin-top: 40px">
            <el-table
                :data="tableData"
                stripe
                style="width: 100%"
                :row-style="{ height: '32px' }"
                :header-row-style="{ height: '10px' }"
                :cell-style="{ padding: '1px' }"
            >
                <el-table-column prop="id" label="分组 id" ></el-table-column>
                <el-table-column prop="group_name" label="分组名" ></el-table-column>
                <el-table-column prop="group_leader" label="组长" ></el-table-column>
                <el-table-column prop="group_num" label="组员总数" ></el-table-column>
                <el-table-column prop="" label="操作" >
                    <template slot-scope="scope">
                        <i
                            class="el-icon-edit"
                            @click="handleEdit(scope.$index, scope.row)"
                        ></i>
                        &nbsp;&nbsp;&nbsp;&nbsp;
                        <i
                            class="el-icon-delete"
                            @click="handleDelete(scope.$index, scope.row)"
                        ></i>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div>
            <!-- 存放新增/编辑 -->
            <div v-show="showAddOrEdit">
                <GroupUserListAddOrEdit ref="groupuserlistaddoredit"></GroupUserListAddOrEdit>
            </div>
        </div>
    </div>
</template>

<script>
    import GroupUserListAddOrEdit from "./GroupUserListAddOrEdit"

    export default {
        name: "GroupUserList",
        data() {
            return {
                showAddOrEdit: false,
                tableData: []
            }
        },
        methods: {
            // 添加用户界面
            handleAddUserGroup() {
                this.showAddOrEdit = true;
                this.$refs.groupuserlistaddoredit.handleOpen();  // 调用子组件中的 open() 方法
            },
            handleEdit(index, row) {
                this.showAddOrEdit = true;
                this.$refs.groupuserlistaddoredit.handleOpen(row);
            },
            // 执行删除
            handleDelete(index, row) {
                // console.log(index, row.id);
                this.$confirm("此操作将删除该分组, 是否继续?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                }).then(() => {
                    this.AXIOS.post(`/api/user/group/del/${row.id}`)
                        .then((res) => {
                            // console.log(res.data.status);
                            if (res.data.status === 1) {
                                this.$message({
                                    type: "success",
                                    message: "删除成功!",
                                });
                                // 刷新
                                this.handleInitUserGroupListData();
                            } else {
                                this.$message({
                                    type: "error",
                                    message: res.data.msg,
                                });
                            }
                        })
                        .catch((err) => {
                            this.$message({type: "error", message: err})
                        });
                });
            },
            handleInitUserGroupListData() {
                console.log(12)
                this.AXIOS.get(`/api/user/grouplist`)
                    .then((res) => {
                        console.log(res.data.data);
                        if (res.data.status === 1) {
                            this.tableData = res.data.data;
                        }
                    })
                    .catch((err) => {
                        this.$message({type: "error", message: err})
                    });
            }
        },
        components: {
            GroupUserListAddOrEdit
        },
        mounted() {
            this.handleInitUserGroupListData()
        }
    }
</script>

<style scoped>

</style>
